<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<link href="${pageContext.request.contextPath}/resources/css/panel.css" rel="stylesheet">
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
    td ul.demo-btns i {color: #e5e5e5;padding: 0 10px;font-style: normal;}
    td ul.demo-btns a.editATxts, a.editATxts {color:#6eb1d4;}
    td ul.demo-btns a.disabledATxts {color:#8c8c8c;}
    td ul.demo-btns a.deleteATxts {color:#ff6969;}
    td ul.demo-btns a.infoATxts {color:#2e9f76;}
    .border-bottom{border-bottom: 1px solid #efefef; padding-bottom: 5px;}
</style>
<script type="text/javascript">
	var disinsectionTable;
	var injectionTable;
    var showerTable;
    var addUrl = "";
    var currentTable = null;
	$(document).ready(function() {
		$("#resetForm").click(function() {
			$("#form input").val("");
		});
		$("#save").click(function() {
			var id = $(".modal-body input[name=id]").val();
            var optTime = $(".modal-body input[name=optTime]").val();
            var remark = $(".modal-body textarea[name=remark]").val();
            $('#petIdInput').val(${pet.id});

			if ($.trim(remark) === "") {
				$.messager.alert("说明不能为空");
				return false;
			}
            if ($.trim(optTime) === "") {
                $.messager.alert("时间不能为空");
                return false;
            }
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : addUrl,
				data : $('#editForm').serialize(),
				success : function(result) {
                    if (result.code === 200) {
                        $("#save").removeAttr("disabled");
                        $("#editModal").modal("hide");
                        $.messager.alert("提示", "保存成功");
                        currentTable.ajax.reload();
                    } else {
                        $.messager.alert("数据保存失败", result.msg);
                    }
				},
                error: function(){
                    $("#save").removeAttr("disabled");
                    $.messager.alert("提示", "操作失败，请检查网络");
                }
			});
		});
        disinsectionTable = $('#disinsectionTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[2, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "remark",
                    "sTitle":"说明",
                    "sDefaultContent": "--",
                    "sWidth": "60%",
                    "sClass": "flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--'){
                            $(nTd).attr('title',sData);
                        }
                    }
                },
                {
                    "mDataProp": "optTime",
                    "sTitle":"除虫时间",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "创建时间",
                    "sWidth": "20%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "125px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='deletePet(" + iRow + ")'><i class='fa fa-times'></i>&nbsp;删除</a>");
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/petDisinsection/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, '');
                    data['search.petId'] = '${pet.id}';
                    return data;
                }
            }
        });
        injectionTable = $('#injectionTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[2, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "remark",
                    "sTitle":"说明",
                    "sDefaultContent": "--",
                    "sWidth": "60%",
                    "sClass": "flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--'){
                            $(nTd).attr('title',sData);
                        }
                    }
                },
                {
                    "mDataProp": "optTime",
                    "sTitle":"打针时间",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "创建时间",
                    "sWidth": "20%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "125px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='deletePet(" + iRow + ")'><i class='fa fa-times'></i>&nbsp;删除</a>");
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/petInjection/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, '');
                    data['search.petId'] = '${pet.id}';
                    return data;
                }
            }
        });
        showerTable = $('#showerTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[2, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "remark",
                    "sTitle":"说明",
                    "sDefaultContent": "--",
                    "sWidth": "60%",
                    "sClass": "flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--'){
                            $(nTd).attr('title',sData);
                        }
                    }
                },
                {
                    "mDataProp": "optTime",
                    "sTitle":"冲凉时间",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "创建时间",
                    "sWidth": "20%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "125px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='deletePet(" + iRow + ")'><i class='fa fa-times'></i>&nbsp;删除</a>");
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/petShower/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, '');
                    data['search.petId'] = '${pet.id}';
                    return data;
                }
            }
        });

        $('#editModal').on('hide.bs.modal', function () {
            $('#editForm input').val('');
            $('#save').removeAttr("disabled");
        });
    });

    function addDisinsection(){
        $('#modalTitle').text('新增除虫记录');
        $('#editModal :input[name=optTime]').val('');
        $('#editModal :input[name=remark]').val('给宠物除虫一次');
        addUrl = contextpath + '/web/petDisinsection/insert';
        currentTable = disinsectionTable;
        $('#editModal').modal('show');
    }

    function addInjection(){
        $('#modalTitle').text('新增打针记录');
        $('#editModal :input[name=optTime]').val('');
        $('#editModal :input[name=remark]').val('给宠物打针一次');
        addUrl = contextpath + '/web/petInjection/insert';
        currentTable = injectionTable;
        $('#editModal').modal('show');
    }

    function addShower(){
        $('#modalTitle').text('新增冲凉记录');
        $('#editModal :input[name=optTime]').val('');
        $('#editModal :input[name=remark]').val('给宠物冲凉一次');
        addUrl = contextpath + '/web/petShower/insert';
        currentTable = showerTable;
        $('#editModal').modal('show');
    }

    function deletePet(row){
        var rowData = petListTable.row(row).data();
        $.messager.confirm("确定", "真的要删除'" + rowData.name + "'吗？", function(){
            $.ajax({
               url : contextpath + '/web/pet/delete/' + rowData.id,
               type : 'DELETE',
               success :  function(data){
                   if (data.code === 200) {
                       $.messager.alert("提示", "删除成功");
                       petListTable.ajax.reload();
                   } else {
                       $.messager.alert(data.msg);
                   }
               }
            });
        });
    }

    function searchTable(){
        petListTable.ajax.reload();
    }

</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>宠物信息</h2>
		</div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h2>${pet.name}</h2>
                <div>
                    <ul class="nav nav-tabs pull-right">
                        <li class="active"><a href="#home1" data-toggle="tab">宠物信息</a></li>
                        <li><a href="#tabb2" data-toggle="tab">除虫记录</a></li>
                        <li><a href="#tabb3" data-toggle="tab">打针记录</a></li>
                        <li><a href="#tabb4" data-toggle="tab">冲凉记录</a></li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="home1">
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object thumbnail" src="${pet.avatar}" alt="头像" width="120" height="120">
                                </a>
                            </div>
                            <div class="media-body">
                                <h2 class="media-heading border-bottom"><strong>${pet.name}</strong></h2>
                                <p class="form-control-static"><strong>主人：</strong>${pet.userName}</p>
                                <p class="form-control-static"><strong>食物：</strong>${pet.foods}</p>
                                <p class="form-control-static"><strong>生日：</strong>${pet.birthday}</p>
                                <p class="form-control-static"><strong>年龄：</strong>${pet.age}</p>
                                <p class="form-control-static"><strong>性别：</strong><c:if test="${pet.sex eq 1}">公性</c:if><c:if test="${pet.sex ne 1}">母性</c:if></p>
                                <p class="form-control-static"><strong>品种：</strong>${pet.typeName}</p>
                                <p class="form-control-static"><strong>绝育：</strong><c:if test="${pet.sex eq 1}">已绝育</c:if><c:if test="${pet.sex ne 1}">未绝育</c:if></p>
                                <p class="form-control-static"><strong>爱好：</strong>${pet.hobby}</p>
                                <p class="form-control-static"><strong>备注：</strong>${pet.remark}</p>
                                <p class="form-control-static" style="visibility: hidden;">占位Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus
                                    dolorum odio at veniam aut id corrupti hic amet consectetur adipisicing tenetur ex ea dignissimos volupta elit esse quisquam fugiat.</p>
                            </div>
                        </div>

                    </div>
                    <div class="tab-pane" id="tabb2">
                        <button type="button" class="btn btn-info" onclick="addDisinsection()">新增除虫记录</button>
                        <div style="padding-top: 10px;">
                            <table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="disinsectionTable"></table>
                        </div>
                    </div>
                    <div class="tab-pane" id="tabb3">
                        <button type="button" class="btn btn-info" onclick="addInjection()">新增打针记录</button>
                        <div style="padding-top: 10px;">
                            <table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="injectionTable"></table>
                        </div>
                    </div>
                    <div class="tab-pane" id="tabb4">
                        <button type="button" class="btn btn-info" onclick="addShower()">新增冲凉记录</button>
                        <div style="padding-top: 10px;">
                            <table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="showerTable"></table>
                        </div>
                    </div>
                   </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="modalTitle">宠物信息</h4>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="petIdInput" name="petId" value="${pet.id}">
                        <table id="editTable" class="table-hover table table-bordered">
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">说明</span>
                                        <textarea class="form-control" name="remark" rows="3" placeholder="说明"></textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">时间</span>
                                        <input type="text" class="form-control" readonly onfocus="WdatePicker({maxDate:'%y-%M-%d', dateFmt: 'yyyy-MM-dd HH:mm'})" name="optTime" style="width: 320px;">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button id="closeModal" type="button" onclick="$('#editModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>


</body>